<template>
  <div class="page_scroll">
    <el-form ref="addForm" :model="addForm" :rules="addFormRules" label-width="120px" size="small">
      <el-form-item label="公司名称：" prop="name">
        <el-input v-model.trim="addForm.name"></el-input>
      </el-form-item>
      <el-form-item label="公司简称：" prop="nickname">
        <el-input v-model.trim="addForm.nickname"></el-input>
      </el-form-item>
      <el-form-item label="公司地址：" prop="address">
        <el-input v-model.trim="addForm.address"></el-input>
      </el-form-item>
      <el-form-item label="公司信用编号：" prop="orgCode">
        <el-input v-model.trim="addForm.orgCode"></el-input>
      </el-form-item>
      <el-form-item label="合作产品：" prop="productId">
        <el-select v-model="addForm.productId">
          <el-option v-for="(item,index) in productList" :key="index" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="合作城市：" prop="city">
        <el-select class="el_select" v-model="addForm.province" @change="changeProvince">
          <el-option v-for="(item,index) in provinceList" :key="`p_${index}`" :label="item.name" :value="item.id"></el-option>
        </el-select>
        <el-select v-model="addForm.city">
          <el-option v-for="(item,index) in cityList" :key="`c_${index}`" :label="item.name" :value="item.name"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="合作状态：" prop="status">
        <el-select v-model="addForm.status">
          <el-option label="合作中" :value="1"></el-option>
          <el-option label="暂停合作" :value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="是否自动分配：" prop="auto">
        <el-select v-model="addForm.auto">
          <el-option label="自动" :value="1"></el-option>
          <el-option label="否" :value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="管理员姓名：" prop="adminName">
        <el-input v-model.trim="addForm.adminName"></el-input>
      </el-form-item>
      <el-form-item label="管理员手机号：" prop="adminPhone">
        <el-input v-model.trim="addForm.adminPhone" maxlength="11"></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { ADD_THIRD_PARTY_INFO, UPDATE_THIRD_PARTY_INFO } from "@/http/customer";
import { GET_ALL_CITYS, GET_ALL_PRODUCT } from "@/http/public";
import { deepClone, showToast } from "@/utils/util";
export default {
  name: "AddCompany",
  props: {
    info: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      addForm: {},
      addFormRules: {
        name: [{ required: true, message: "请输入公司名称", trigger: "blur" }],
        nickname: [
          { required: true, message: "请输入公司简称", trigger: "blur" },
        ],
        address: [
          { required: true, message: "请输入公司地址", trigger: "blur" },
        ],
        orgCode: [
          { required: true, message: "请输入公司信用编号", trigger: "blur" },
        ],
        productId: [
          { required: true, message: "请选择合作产品", trigger: "change" },
        ],
        city: [
          { required: true, message: "请选择合作城市", trigger: "change" },
        ],
        status: [
          { required: true, message: "请选择合作状态", trigger: "change" },
        ],
        auto: [
          { required: true, message: "请选择是否自动分配", trigger: "change" },
        ],
        adminName: [
          { required: true, message: "请输入管理员姓名", trigger: "blur" },
        ],
        adminPhone: [
          { required: true, message: "请输入管理员手机号", trigger: "blur" },
        ],
      },
      provinceList: [],
      cityList: [],
      cascaderProps: {
        value: "id",
        label: "name",
        children: "childList",
      },
      productList: [],
    };
  },
  watch: {
    info: {
      handler(n, o) {
        if (n) {
          this.addForm = n;
        }
      },
      immediate: true,
    },
  },
  mounted() {
    this.getCity();
    this.getProduct();
  },
  methods: {
    // 获取所有城市
    getCity() {
      GET_ALL_CITYS().then((res) => {
        let obj = res.data || {};
        let list = obj.childList || [];
        this.provinceList = list;
        //this.expendArray(list)
        if (this.info && this.info.id) {
          this.setProvince();
        }
      });
    },

    // 获取所有产品
    getProduct() {
      GET_ALL_PRODUCT().then((res) => {
        this.productList = res.data || [];
      });
    },

    // 设置省份数据
    setProvince() {
      let list = this.provinceList;
      let n = this.info;
      let m = list.find((k) => {
        let o = k.childList.find((j) => j.name == n.city);
        return o;
      });

      if (m) {
        this.cityList = m.childList;
        this.$set(this.addForm, "province", m.id);
      }
      console.log(m);
    },

    // 切换省份
    changeProvince(e) {
      let list = this.provinceList;
      let o = list.find((k) => k.id == e);
      if (o) {
        this.cityList = o.childList;
      }
      if (this.addForm.city) {
        delete this.addForm.city;
      }
    },

    // 保存信息
    saveInfo() {
      let _this = this;
      this.$refs.addForm.validate((valid) => {
        if (!valid) {
          _this.$emit("change");
          return false;
        }
        let oParams = _this.getParams();

        // 编辑合作企业
        if (_this.info && _this.info.id) {
          UPDATE_THIRD_PARTY_INFO(oParams).then((res) => {
            if (res.code == 200) {
              showToast({
                message: res.message,
                type: "success",
              });
              _this.$emit("change", true);
            }
          });
          return false;
        }

        ADD_THIRD_PARTY_INFO(oParams).then((res) => {
          if (res.code == 200) {
            showToast({
              message: res.message,
              type: "success",
            });
            _this.$emit("change", true);
          }
        });
      });
    },

    // 获取参数
    getParams() {
      let oParams = deepClone(this.addForm);
      let list = this.productList;
      let o = list.find((k) => k.id == oParams.productId);
      if (o) {
        oParams.productName = o.name;
      }
      delete oParams.province;
      return oParams;
    },
  },
};
</script>
<style lang="scss" scoped>
.el_select {
  margin-right: 10px;
}
</style>